<template>
  <div class="headerVue">
    <svg
      v-if="btnActive"
      @click="backPath"
      class="header__backArrow"
      width="45px"
      height="45px"
      viewBox="0 0 1024 1024"
      fill="currentColor"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M669.6 849.6c8.8 8 22.4 7.2 30.4-1.6s7.2-22.4-1.6-30.4l-309.6-280c-8-7.2-8-17.6 0-24.8l309.6-270.4c8.8-8 9.6-21.6 2.4-30.4-8-8.8-21.6-9.6-30.4-2.4L360.8 480.8c-27.2 24-28 64-0.8 88.8l309.6 280z"
        fill=""
      />
    </svg>
    <p class="header__name">{{ namePage }}</p>
  </div>
</template>

<script>
import router from "../../router/index";

export default {
  name: "MyHeader",
  data() {
    return {
      btnActive: true,
    };
  },
  props: {
    namePage: String,
  },
  methods: {
    backPath() {
      console.log(router);
      this.$router.back();
    },
  },
};
</script>

<style scoped>
.headerVue {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid var(--tg-theme-text-color);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.header__name {
  text-align: center;
  font-size: 38px;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  color: var(--tg-theme-text-color);
}

.header__backArrow {
  color: var(--tg-theme-text-color);
  position: absolute;
  left: 10px;
  top: 0;
}
</style>
